<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('时间轴详情')"/>
    <style>
        @media screen and (max-width: 800px) {
            .m-mobile-show {
                padding-top: 0px !important;
                border-top-width: 0px !important;
                border-left-width: 0px !important;
                margin-right: 0px !important;
                padding-left: 4px !important;
                padding-right: 4px !important;
                border-right-width: 0px !important;
                border-bottom-width: 0px !important;
            }
        }
    </style>
</head>

<body>
<div class="main-content">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1 col-sm-12 col-md-12 m-mobile-show" id="rightBox">
            <div class="mail-box-header m-mobile-show" style="padding-top: 10px !important;">
                <div class="mail-tools tooltip-demo m-t-md">
                    <h3 style="text-align: center">[[${timeLineS.timeTitle}]]</h3>
                    <h5>
                        <span class="pull-right font-noraml">发布时间：[[${#dates.format(timeLineS.createTime, 'yyyy-MM-dd HH:mm:ss')}]] </span>
                        <span class="font-noraml">发布人： </span>[[${timeLineS.createBy}]]
                    </h5>
                </div>
            </div>
            <div class="mail-box m-mobile-show">
                <div class="mail-body" th:utext="${timeLineS.content}"></div>
            </div>

            <!-- 展示附件 -->
            <div th:if="${not #lists.isEmpty(timeLineS.attachmentList)}" style="margin-top: 1em;">
                <h4 style="font-size: 1.2em; color: #333; font-weight: bold;">附件：</h4>
                <div style="margin-top: 0.5em; display: flex; flex-direction: column; gap: 0.5em;">
                    <!-- 遍历附件列表 -->
                    <div th:each="attachment : ${timeLineS.attachmentList}"
                         style="display: flex; justify-content: space-between; align-items: center; padding: 0.5em 0; border-bottom: 1px solid #ddd;">
                        <a th:href="@{${attachment.urlPath}}"
                           th:text="${attachment.attachmentName}"
                           title="点击查看附件"
                           th:attr="target=${#strings.endsWith(attachment.urlPath, '.txt') or #strings.endsWith(attachment.urlPath, '.pdf') ? '' : '_blank'}"

                           class="attachment-link">
                        </a>
                        <!-- 下载按钮 -->
                        <a th:href="@{${attachment.urlPath}}"
                           th:download="${attachment.attachmentName}"
                           th:title="点击下载附件"
                           style="color: #1f77d4; text-decoration: none; font-size: 1em; padding: 0.3em 0.8em; display: inline-flex; align-items: center;">
                            <i class="download icon" style="margin-right: 0.5em;"></i>
                            下载
                        </a>
                    </div>
                </div>
            </div>

            <!-- 删除和编辑按钮 -->
            <br>
            <div class="mail-box-footer" style="text-align: center; margin-top: 20px;">

                <a th:onclick="removeTimeLineS([[${timeLineS}]])" shiro:hasPermission="timeline:s:remove"
                   class="btn btn-danger">删除</a>

                <a th:onclick="editTimeLineS([[${timeLineS.id}]])" shiro:hasPermission="timeline:s:edit"
                   class="btn btn-info">编辑</a>
            </div>

        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    function removeTimeLineS(row) {
        var id = row.id;
        var mId = row.mid;
        table.set();
        $.modal.confirm("确定删除该条信息吗？", function () {
            var url = "/memorial/TimeLineS/remove";
            var data = {"ids": id};
            // $.operate.submit(url, "post", "json", data);
            $.ajax({
                type: "post",
                url: url,
                data: data,
                dataType: "json",
                success: function (data) {
                    $.modal.openTab("时间轴列表", ctx + "memorial/TimeLineM/detail/" + mId, true);
                },
                error: function (xhr, textStatus) {
                }
            });
        });
    }

    /**
     * 修改
     * @param id
     */
    function editTimeLineS(id) {
        table.set();
        if ($.common.isEmpty(id)) {

        } else {
            openFull("编辑", "/memorial/TimeLineS/edit/" + id,id);
        }
    };

    function openFull  (title, url,id, width, height) {
        // 如果是移动端，就使用自适应大小弹窗
        if ($.common.isMobile()) {
            width = 'auto';
            height = 'auto';
        }
        if ($.common.isEmpty(title)) {
            title = false;
        }
        if ($.common.isEmpty(url)) {
            url = "/404.html";
        }
        if ($.common.isEmpty(width)) {
            width = 800;
        }
        if ($.common.isEmpty(height)) {
            height = ($(window).height() - 50);
        }
        var index = top.layer.open({
            type: 2,
            area: [width + 'px', height + 'px'],
            fix: false,
            //不固定
            maxmin: true,
            shade: 0.3,
            title: title,
            content: url,
            btn: ['确定', '关闭'],
            // 弹层外区域关闭
            shadeClose: true,
            yes: function(index, layero) {
                var iframeWin = layero.find('iframe')[0];
                iframeWin.contentWindow.submitHandler(index, layero);
                top.layer.close(index);  // 关闭弹窗
                // 延迟刷新当前页面
                setTimeout(function() {
                    window.location.reload();
                }, 90); // 延迟9毫秒
            },
            cancel: function(index) {
                return true;
            },
            success: function () {
                $(':focus').blur();
            }
        });
        top.layer.full(index);
    };


</script>
</body>
</html>
